<template>
  <page-header-wrapper>
    <div class="keyword-page">
      <a-card :bordered="false">
        <div class="operator-box">
          <span style="color:#999;">备注：这个关键字 显示到搜索页面里面的 。 </span>
          <div>
            <a-button
              type="primary"
              @click="() => ((this.params.keyword = null), (this.params.type = 'add'), (this.visible = true))"
              icon="plus"
              >新建</a-button
            >
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item key="5" @click="operateAll('delete')">批量删除</a-menu-item>
              </a-menu>
              <a-button> 批量设置 <a-icon type="down" /> </a-button>
            </a-dropdown>
          </div>
        </div>
        <s-table
          size="default"
          :columns="columns"
          :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
          :row-key="record => record.id"
          :data="loadData"
          ref="table"
        >
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="handlePreview(record)" size="small">编辑</a-button>
            <a-button type="link" @click="handleDelete(record)" size="small">删除</a-button>
          </span>
        </s-table>
        <a-modal
          title="编辑"
          :mask-closable="false"
          :destroy-on-close="true"
          v-model="visible"
          @ok="handleEdit"
          @cancel="visible = false"
        >
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="关键词">
            <a-input style="width: 320px" placeholder="关键词" v-model="params.keyword" />
          </a-form-item>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { list, save, delKeyword, delAll } from '@/api/goods/keyword'

const columns = [
  {
    title: '关键词',
    dataIndex: 'value'
  },
  // {
  //   title: '更新时间',
  //   dataIndex: 'update_time',
  //   key: 'full_update_timeminus_num',
  //   width: 300,
  //   sorter: (a, b) => a.update_time - b.update_time,
  // },
  {
    title: '操作',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'ActionLog',
  components: {
    STable
  },
  data() {
    return {
      params: {
        keyword: null,
        type: null,
        key: null
      },
      keyword: null,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      modalLoading: false,
      records: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return list(parameter).then(res => {
          return res.data
        })
      },
      selectedRowKeys: []
    }
  },
  filters: {},
  created() {},
  methods: {
    operateAll(type) {
      if (type == 'delete') {
        console.log('selectedRowKeys changed: ', this.selectedRowKeys)
        delAll({ id: this.selectedRowKeys })
          .then(res => {
            console.log(res)
            if (!res.code) {
              this.$refs.table.refresh()
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    handlePreview: function(record) {
      console.log(record)
      this.params.keyword = record.value
      this.params.type = 'edit'
      this.params.key = record.id
      this.visible = true
    },
    handleEdit() {
      save(this.params).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.visible = false
          this.$refs.table.refresh()
        } else {
          this.$error({
            content: res.msg
          })
        }
      })
    },
    handleDelete: function(record) {
      this.$confirm({
        title: '提示',
        content: '确定要删除选择的关键词吗?',
        onOk: () => {
          const hide = this.$message.loading('删除中...', 0)
          delKeyword({
            key: record.id
          }).then(res => {
            hide()
            if (res.code === 0) {
              this.$message.success('操作成功！')
              this.$refs.table.refresh()
            } else {
              this.$error({
                content: res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.operator-box {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  /* justify-content: flex-end; */
  align-items: center;
  /deep/.ant-btn {
    margin-right: 8px;
  }
}
.keyword-page {
  /deep/.ant-card-body {
    padding: 24px 32px;
  }
}
</style>
